<template>
  <div>
    <div class="bp-query">
      <div
        class="bp-query-item"
        :class="{ 'is-active': showType === 1 || queryType, 'text-muted': !queryTypeLabel }"
        @click="handleSelectType"
      >
        <div class="bp-query-label">{{ queryTypeLabel || '银行类型' }}</div>
        <div class="el-icon-arrow-down"></div>
      </div>
      <div
        class="bp-query-item"
        :class="{ 'is-active': showType === 2 || queryAddress, 'text-muted': !queryAddressLabel }"
        @click="handleSelectAddress"
      >
        <div class="bp-query-label">{{ queryAddressLabel || '所属地区' }}</div>
        <div class="el-icon-arrow-down"></div>
      </div>
    </div>

    <div v-loading="loading" style="min-height: 353px; position: relative">
      <el-scrollbar
        v-if="banks.length"
        tag="ul"
        wrap-class="c-area-dropdown__wrap"
        view-class="el-select-dropdown__list"
        ref="scrollbar"
      >
        <li
          v-for="(bank, index) in banks"
          :key="index"
          class="el-cascader-node bp-node"
          :class="{ 'is-active': bank.agency_id === selected }"
          @click.stop="selectOptionClick(bank)"
        >
          <span>{{ bank.agency_name }}</span>
        </li>
      </el-scrollbar>
      <div v-else-if="!loading" class="bp__empty-text">{{ noDataText || '' }}</div>

      <transition name="el-fade-in">
        <div v-show="showType !== 0" class="bp__mask"></div>
      </transition>
    </div>

    <transition name="el-zoom-in-top">
      <select-org-bank-type
        v-show="showType === 1"
        v-model="queryType"
        @close="handleQueryClose"
        @change="handleQueryTypeChange"
      ></select-org-bank-type>
    </transition>

    <transition name="el-zoom-in-top">
      <select-org-bank-address
        v-show="showType === 2"
        v-model="queryAddress"
        @close="handleQueryClose"
        @change="handleQueryAddressChange"
      ></select-org-bank-address>
    </transition>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SelectOrgBankType from '@/gov/components/select/selectOrgBank/PanelType'
import SelectOrgBankAddress from '@/gov/components/select/selectOrgBank/PanelAddress'

export default {
  components: {
    SelectOrgBankType,
    SelectOrgBankAddress,
  },
  props: {
    value: String,
    disabled: Boolean,
    noDataText: String,
  },
  data() {
    return {
      loading: false,
      banks: [],
      selected: '',
      showType: 0, // 0 bank 1 type 2 address
      queryType: '',
      queryTypeLabel: '',
      queryAddress: '',
      queryAddressLabel: '',
    }
  },
  computed: {
    ...mapGetters(['user']),
  },
  watch: {},
  created() {
    this.getBank()
  },
  mounted() {},
  methods: {
    async getBank() {
      this.loading = true
      this.$api
        .getData({
          table: 'credit_agency_info_view',
          params: {
            'agency_type.eq': 1,
            'agency_type_sub.eq': this.queryType,
            address_code: this.queryAddress || this.user.queryAddressCode,
            fields: [
              'agency_id',
              'agency_name',
              'address_code',
              'address',
              'address_detail',
              'agency_type',
              'agency_type_sub',
              'org_region_lever',
            ],
          },
        })
        .then(res => {
          this.banks = res.data || []
        })
        .finally(() => {
          this.loading = false
        })
    },
    selectOptionClick(bank) {
      if (!this.disabled) {
        this.selected = bank.agency_id || ''
        this.$emit('input', this.selected)
        this.$emit('change', bank)
      }
    },
    clear() {
      this.selected = ''
    },
    resetQuery() {
      this.showType = 0
    },
    handleSelectType() {
      this.showType = this.showType === 1 ? 0 : 1
    },
    handleSelectAddress() {
      this.showType = this.showType === 2 ? 0 : 2
    },
    handleQueryClose() {
      this.showType = 0
    },
    handleQueryTypeChange(val) {
      this.queryTypeLabel = val.enum_value || ''
      this.getBank()
    },
    handleQueryAddressChange(val) {
      this.queryAddressLabel = val.geoName || ''
      this.getBank()
    },
  },
}
</script>

<style lang="scss" scoped>
.bp-query {
  min-width: 260px;
  display: flex;
  border-bottom: 1px solid $gray-200;

  &-item {
    flex: 1;
    width: 50%;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: color 0.3s;

    &:hover,
    &.is-active {
      color: $primary !important;
      color: var(--primary) !important;
    }
  }

  &-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.bp__empty-text {
  padding: 145px 0;
  color: $gray-600;
  min-width: 200px;
  text-align: center;
}

.bp-node {
  height: auto;
  min-height: 34px;
  line-height: 1rem;
}

.bp__mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}
</style>
